<template>

    <div class="home">
        <div class="header-index top">
            <div class="logo">
                <i class="img"><img src="../assets/images/logo_a.svg" class="white"><img v-if="menulistconfig"
                                                                                         :src="this.$store.state.domain+menulistconfig[1].img"
                                                                                         class="color"></i><span
                v-if="menulistconfig" class="t">{{menulistconfig[0].name}}</span>
            </div>
            <!--最上角中英文切换-->
            <div class="menu_btn">
                <a v-if="gshow" href="#" class="roll-hover-btn cn"><span class="s">中文</span><span class="x">中文</span></a>
                <em v-if="gshow">/</em>
                <a v-if="gshow" href="#" class="roll-hover-btn zn"><span class="s">EN</span><span class="x">EN</span></a>
                <i class="roll-hover-btn dh openContact"><span class="s"></span><span class="x"></span></i>
            </div>
        </div>
        <a href="javascript:;" class="switch2 switch switchnav"><span>Menu</span><i><em></em></i></a>
        <main id="main">
            <section id="scene_1" class="section" style="visibility: hidden; opacity: 0;">
                <div class="scene_bg scene_1_bg">
                    <!-- poster="../assets/images/bj1.jpg"-->

                    <video preload="auto" loop="" id="js-mainIndexVideo1" class="js-mainIndexVideo" muted="true"
                           playsinline="true" v-if="isMobile==0">
                        <source src="https://zounikeji.oss-cn-beijing.aliyuncs.com/kt.mp4">
                    </video>

                    <section v-show="isMobile==1" id="videoWrapper" width="500px" height="600px"
                             style="width:500px;height:600px">
                        <canvas id="gcanvas"></canvas>
                    </section>


                    <div v-if="isMobile==0"></div>
                </div>
                <div class="scene_1">
                    <div class="index_logo">
                        <i class="img scene_text"><img v-if="menulistconfig"
                                                       :src="this.$store.state.domain+menulistconfig[2].img"
                                                       class="scene_inner"></i>
                        <!--<p class="title scene_text"><img src="../assets/images/slogan.svg" class="scene_inner"></p>-->
                    </div>
                </div>
            </section>
            <section id="scene_2" class="section" style="visibility: hidden; opacity: 0;">
                <div class="scene_bg scene_2_bg"></div>
                <div class="scene_2">
                    <div class="lou scene_picture"><img class="scene_inner" src="../assets/images/lou1.png"></div>
                    <div class="box">
                        <div class="h1 scene_text"><span v-if="menudatalist" class="scene_inner">{{menudatalist[0].alias}}</span>
                        </div>
                        <div class="h2 scene_text"><span v-if="menudatalist" class="scene_inner">{{menudatalist[0].name}}</span>
                        </div>
                        <div class="txt scene_text"><span v-if="menudatalist" class="scene_inner">{{menudatalist[0].info}}</span>
                        </div>
                        <div class="subsidiary_hr scene_opacity"></div>
                        <div class="subsidiary_box">
                            <div class="h3 scene_text"><span class="scene_inner">四大子公司</span></div>
                            <ul class="ul subsidiary_list">
                                <li class="scene_pic">
                                    <div class="scene_inner">
                                        <i class="n1"><img src="../assets/images/n1.svg"></i>
                                        <p>大地海腾</p>
                                    </div>
                                </li>
                                <li class="scene_pic">
                                    <div class="scene_inner">
                                        <i class="n4"><img src="../assets/images/n2.svg"></i>
                                        <p>金华银河</p>
                                    </div>
                                </li>
                                <li class="scene_pic">
                                    <div class="scene_inner">
                                        <i class="n2"><img src="../assets/images/n3.svg"></i>
                                        <p>和美科盛</p>
                                    </div>
                                </li>
                                <li class="scene_pic">
                                    <div class="scene_inner">
                                        <i class="n3"><img src="../assets/images/n4.svg"></i>
                                        <p>九和宜生</p>
                                    </div>
                                </li>
                            </ul>
                            <div class="index_more scene_text page_2bnt" style="float: right;margin-right: -35px">
                                <router-link :to="{name:'about'}" class="scene_inner">READ MORE</router-link>
                            </div>

                        </div>
                    </div>
                </div>
            </section>
            <section id="scene_3" class="section" style="visibility: hidden; opacity: 0;">
                <div class="scene_bg scene_3_bg"></div>
                <div class="scene_2 yao-show">
                    <div class="title">
                        <div class="en scene_text"><span v-if="menudatalist" class="scene_inner">{{menudatalist[1].alias}}</span>
                        </div>
                        <div class="cn scene_text"><span v-if="menudatalist" class="scene_inner">{{menudatalist[1].name}}</span>
                        </div>
                    </div>
                    <div class="yao scene_picture"><img v-if="menudatalist" class="scene_inner"
                                                        :src="this.$store.state.domain+menudatalist[1].imgs[0]"></div>
                    <div class="index_more scene_text"><a v-if="menudatalist" class="scene_inner"
                                                          :href="menudatalist[1].source"
                                                          target="_blank"><span>在线商城</span></a></div>
                </div>
                <div class="index_logo">
                    <i class="img scene_text"><img v-if="menudatalist"
                                                   :src="this.$store.state.domain+menudatalist[1].imgs[1]"
                                                   class="scene_inner"></i>
                    <!--<p class="title scene_text"><img  v-if="menudatalist" :src="this.$store.state.domain+menudatalist[1].imgs[2]" class="scene_inner"></p>-->
                </div>

            </section>
            <section id="scene_4" class="section" style="visibility: hidden; opacity: 0;">
                <div class="scene_bg scene_4_bg">
                    <div id="wave"></div>
                </div>
                <div class="section index2">
                    <div class="index3_box">
                        <!--PC端展示-->
                        <div class="pc" v-if='isMobile==0'>
                            <swiper v-if="menudatalist" :options="swiperPartner">
                                <swiper-slide v-for="(items,indexs) in menudatalist[2].son" :key="indexs">
                                    <ul class="ul index3_list fl-clr" v-if="menudatalist">
                                        <li v-for="(item,index) in items.data" :key="index">
                                            <div v-if="index<6" class="scene_pic">
                                                <router-link :to="{path:item.source}" class="scale scene_inner">
                                                    <i class="img"><img :src="$store.state.domain+item.pic"></i>
                                                    <span class="tip">{{item.name}}</span>
                                                    <div class="title" v-html="item.alias"></div>
                                                    <div class="time">{{item.intime|gdate}}</div>
                                                </router-link>
                                            </div>

                                        </li>
                                    </ul>
                                </swiper-slide>
                            </swiper>
                            <div class="details_bottom fl-clr scene_text">
                                <span class="scene_inner">
                                    <div class="a swiper-next"></div>
                                    <div class="a swiper-prev"></div>
                                </span>
                            </div>
                        </div>
                        <!--移动端展示-->
                        <div class="web" v-if='isMobile==1'>

                            <swiper v-if="menudatalist" :options="swiperPartner">
                                <swiper-slide v-for="(items,indexs) in listTemp(4,menudatalist[2].son)" :key="indexs">
                                    <ul class="ul index3_list fl-clr" v-if="menudatalist">
                                        <li v-for="(item,index) in items" :key="index">
                                            <div v-if="index<6" class="scene_pic">
                                                <router-link :to="{path:item.source}" class="scale scene_inner">
                                                    <i class="img"><img :src="$store.state.domain+item.pic"></i>
                                                    <span class="tip">{{item.name}}</span>
                                                    <div class="title" v-html="item.alias"></div>
                                                    <div class="time">{{item.intime|gdate}}</div>
                                                </router-link>
                                            </div>
                                        </li>
                                    </ul>
                                </swiper-slide>
                            </swiper>

                            <div class="swiper_more scene_pic"><img src="../assets/images/more.svg" class="scene_inner">
                            </div>
                        </div>


                    </div>
                </div>
            </section>
            <section id="scene_5" class="section" style="visibility: hidden; opacity: 0;">
                <div class="scene_bg scene_5_bg"></div>
                <div class="section index2">

                    <div class="partner scene_text" v-if="menudatalist">
                        <div class="title">
                            <div class="en scene_pic"><span class="scene_inner">{{menudatalist[3].alias}}</span></div>
                            <div class="cn scene_pic"><span class="scene_inner">{{menudatalist[3].name}}</span></div>
                        </div>
                        <div class="swiper-partners">
                            <!--PC端展示-->
                            <div class="pc" v-if='isMobile==0'>
                                <swiper :options="swiperPartners">
                                    <swiper-slide>
                                        <ul class="ul swiperPartners-list  fl-clr">
                                            <li v-for="(items,indexs) in menudatalist[3].data" :key="indexs"
                                                v-show="indexs<21">
                                                <div class="box"><img :src="$store.state.domain+items.pic"></div>
                                            </li>
                                        </ul>
                                    </swiper-slide>
                                    <swiper-slide>
                                        <ul class="ul swiperPartners-list  fl-clr">
                                            <li v-for="(items,indexs) in menudatalist[3].data" :key="indexs"
                                                v-show="indexs>20&&indexs<42">
                                                <div class="box"><img :src="$store.state.domain+items.pic"></div>
                                            </li>
                                        </ul>
                                    </swiper-slide>
                                </swiper>
                                <div class="swiper-pagination"></div>
                            </div>

                            <!--移动端展示-->
                            <div class="web" v-if='isMobile==1'>
                                <swiper :options="swiperPartners">
                                    <swiper-slide v-for="(items,indexs) in listTemps(9,menudatalist[3].data)" :key="indexs">
                                        <ul class="ul swiperPartners-list  fl-clr">
                                            <li v-for="(item,index) in items" :key="index">
                                                <div class="box"><img :src="$store.state.domain+item.pic"></div>
                                            </li>
                                        </ul>
                                    </swiper-slide>
                                    

                                </swiper>
                                <div class="swiper-pagination"></div>
                                <div class="swiper_more scene_pic"><img src="../assets/images/morea.svg"
                                                                        class="scene_inner"></div>
                            </div>

                        </div>
                    </div>
                    <div class="bottom scene_picture">
                        <div class="scene_inner">
                            <Footer/>
                        </div>
                    </div>
                </div>
            </section>
        </main>


        <div id="fp-nav">
            <ul>
                <li><a href="#"><span></span></a></li>
                <li><a href="#"><span></span></a></li>
                <li><a href="#"><span></span></a></li>
                <li><a href="#"><span></span></a></li>
                <li><a href="#"><span></span></a></li>
            </ul>
            <i class="tips"></i>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.home {
    touch-action: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

.bottom {
    width: 100%;
    position: absolute;
    bottom: 0;
    -webkit-perspective: 1000px;
    perspective: 1000px;

    .scene_inner {
        background: rgba(0, 0, 0, .55);
        width: 100%;
        height: 100%;
    }

    .footer {
        background: none;
        padding: 2% 0
    }
}
</style>
<script>
import Footer from '../components/Footer.vue'
import '../js/html.js';
//import '../js/jquery.easing.min.js';
import '../js/jquery.mousewheel.min.js';
import JSMpeg from 'jsmpeg-player';
//import {start1} from '../js/three-animate';

import {gsap, Sine, Expo, Power3} from "gsap";
import {start} from "../js/three-animate";


export default {
    name: 'home',
    components: {
        Footer
    },
    data () {
        return {
            gshow:false,
            isMobile: 0, //pc:0 web:1
            swiperPartners: {
                loop: true,
                slidesPerView: 1,
                autoplay: {
                    delay: 10000,
                    disableOnInteraction: false
                },
                pagination: {
                    el: '.partner .swiper-pagination',
                    clickable: true
                }
            },
            swiperPartner: {
                loop: true,
                slidesPerView: 1,
                spaceBetween: 15,
                navigation: {
                    nextEl: '.index3_box .swiper-prev',
                    prevEl: '.index3_box .swiper-next',
                }
            }
        }
    },
    computed: {
        menulistconfig () {
            return this.$store.getters.getmenuconfig
        },
        menudatalist () {
            if (JSON.stringify(this.$store.getters.getmenudatalist(0)).length > 100) {
                return this.$store.getters.getmenudatalist(0)
            } else {
                return false
            }
        },
        listTemp: function () {
            return function (counts, datas) {
                var gdatas = [];
                for (var i = 0; i < Object.keys(datas).length; i++) {
                    for (var j = 0; j < Object.keys(datas[i].data).length; j++) {
                        gdatas.push(datas[i].data[j]);
                    }
                }

                let index = 0;
                let count = counts ? counts : 9;
                let arrTemp = [];
                let experts = gdatas;
                for (let i = 0; i < Object.keys(gdatas).length; i++) {
                    index = parseInt(i / count);
                    if (arrTemp.length <= index) {
                        arrTemp.push([]);
                    }
                    arrTemp[index].push(experts[i])
                }
                return arrTemp
            }
        },
        listTemps: function () {
            return function (counts, datas) {
                let index = 0;
                let count = counts ? counts : 9;
                let arrTemp = [];
                let experts = datas;
                for (let i = 0; i < Object.keys(datas).length; i++) {
                    index = parseInt(i / count);
                    if (arrTemp.length <= index) {
                        arrTemp.push([]);
                    }
                    arrTemp[index].push(experts[i])
                }
                return arrTemp
            }
        }
    },
    mounted () {
        if (isMobile()) {
            this.isMobile = 1
            var videoUrl = 'http://ketuo.xlhd.cn/upload/out.ts';
            var gcanvas = document.getElementById('gcanvas');
            new JSMpeg.VideoElement('#videoWrapper', videoUrl, {
                canvas: gcanvas,
                control: false,
                autoplay: true,
                loop: true,
                autoSetWrapperSize: true,
                audio: false,
                streaming: true
            }, { chunkSize: 1024 * 1024 });


        } else {
            this.isMobile = 0
        }
        $('#app').addClass('is_home');
        start();
        //let tl = gsap.timeline();
        let Tween = gsap;

        function page (p) {
            this.$scene = '#scene_' + p;
            this.$sceneBg = '.scene_' + p + '_bg';
            this.$sceneText = '#scene_' + p + ' .scene_text .scene_inner';
            this.$scenePic = '#scene_' + p + ' .scene_pic .scene_inner';
            this.$scenePicture = '#scene_' + p + ' .scene_picture .scene_inner';
            this.$sceneOpacity = '#scene_' + p + ' .scene_opacity';
            this.transDuration = 1.5
        }

        function isMobile () {
            let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
            return flag;
        }

        page.prototype = {
            show: function (e, t) {
                //this.$body.addClass("is-scene" + this.id);
                var r = e ? "47.7%" : "-47.7%", o = e ? "200%" : "-200%";
                Tween.set(this.$scene, { autoAlpha: 1 });

                Tween.set(this.$sceneBg, {
                    z: "-200px",
                    rotationZ: 2
                });
                Tween.fromTo(this.$sceneBg, t ? 0 : this.transDuration, { x: r, y: o, rotationZ: 2 }, {
                    x: "0%",
                    y: "0%",
                    rotationZ: 0,
                    ease: Expo.easeInOut
                });
                Tween.to(this.$sceneBg, t ? 0 : .65 * this.transDuration, {
                    z: 0,
                    ease: Sine.easeInOut,
                    delay: .35 * this.transDuration,
                    onComplete: function () {
                        //i.setSceneTrans(!1)
                    }
                })


                let sign = e ? 1 : -1;
                Tween.fromTo(this.$scenePicture, 1.5, {
                    autoAlpha: 0,
                    x: 0,
                    y: 400 * sign + "px",
                    z: "400px",
                    rotationX: 25 * sign
                }, {
                    autoAlpha: 1,
                    x: 0,
                    y: 0,
                    z: 0,
                    rotationX: 0,
                    ease: Power3.easeInOut, onComplete: function () {
                    }
                }, .1)


                Tween.fromTo(this.$sceneText, t ? 0 : this.transDuration * 0.5, { y: e ? '100%' : '-100%' }, {
                    y: '0%',
                    ease: Sine.easeInOut,
                    delay: this.transDuration * .5,
                })
                Tween.fromTo(this.$scenePic, t ? 0 : this.transDuration * 0.5, { y: e ? '100%' : '-100%' }, {
                    y: '0%',
                    ease: Sine.easeInOut,
                    delay: this.transDuration * .5,
                    stagger: 0.1
                })
                Tween.fromTo(this.$sceneOpacity, t ? 0 : this.transDuration * 0.5, { alpha: 0 }, {
                    alpha: 1,
                    delay: this.transDuration * .5,
                })
            },
            hide: function (e) {

                var $this = this;
                let n = e ? "-47.7%" : "47.7%", i = e ? "-200%" : "200%";
                Tween.fromTo(this.$sceneText, this.transDuration * 0.5, { y: '0%' }, {
                    y: e ? '-100%' : '100%',
                    ease: Sine.easeInOut,
                    //delay: this.transDuration * .5,
                    onComplete: function () {
                        //i.setSceneTrans(!1)
                    }
                })
                Tween.fromTo(this.$scenePic, this.transDuration * 0.5, { y: '0%' }, {
                    y: e ? '-100%' : '100%',
                    ease: Sine.easeInOut,
                    //delay: this.transDuration * .5,
                    onComplete: function () {
                        //i.setSceneTrans(!1)
                    }
                })
                Tween.to(this.$sceneBg, this.transDuration, {
                    x: n,
                    y: i,
                    ease: Expo.easeInOut,
                    onComplete: function () {
                        Tween.set($this.$scene, { autoAlpha: 0 })
                    }
                });
                Tween.to(this.$sceneBg, .65 * this.transDuration, {
                    z: "-200px",
                    rotationZ: 1,
                    ease: Sine.easeInOut
                })


                var r = e ? -1 : 1;
                Tween.to(this.$scenePicture, .9 - .3, {
                    autoAlpha: 0,
                    x: 60 * r + "px",
                    y: 300 * r + "px",
                    z: "-200px",
                    rotationX: 5 * r,
                    ease: Power3.easeIn
                }, .1)


                Tween.fromTo(this.$sceneOpacity, .65 * this.transDuration, { alpha: 1 }, {
                    alpha: 0,
                })
            }
        }
        let _page = 1;
        let pages = {};

        let _do = false;
        var gstartY = 0;
        var gstartX = 0;
        $('.home').on('touchstart', function (e) {
            //e.preventDefault()
            gstartY = e.touches[0].pageY;
            gstartX = e.touches[0].pageX;
        });
        $('.home').on('touchmove mousewheel', function (event, delta) {
            //event.preventDefault()
            if (event.type == 'touchmove') {
                var endY = event.changedTouches[0].pageY;
                var endX = event.changedTouches[0].pageX;
                var distanceX = endX - gstartX;
                var distanceY = endY - gstartY;
                if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 0) {
                    console.log('移动');
                } else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY < 0) {
                    delta = -1;
                } else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY > 0) {
                    delta = 1;
                }
            }
            if (!_do) {
                // console.log(delta)
                if (delta > 0 && _page > 1) {
                    // console.log('a',_page);
                    pages['page' + (_page)].hide(0);
                    $('body').removeClass('page_' + _page)
                    _page--;
                    pages['page' + (_page)].show(0);
                    $('body').addClass('page_' + _page)


                    $('#fp-nav li a').removeClass('active')
                    $('#fp-nav li:eq(' + (_page - 1) + ') a').addClass('active')

                    _do = true;
                    setTimeout(function () {
                        if (_page == 4) {
                            $('.header-index').addClass("bright")
                            $('.switch2 ').addClass("active")
                        } else {
                            $('.header-index').removeClass("bright")
                            $('.switch2 ').removeClass("active")
                        }
                        _do = false;
                    }, 1000)
                } else if (delta < 0 && _page < 5) {
                    //console.log(_page);
                    $('.swiper-partners .swiper-pagination span').eq(0).trigger('click');
                    pages['page' + (_page)].hide(1);
                    $('body').removeClass('page_' + _page)
                    _page++;
                    pages['page' + (_page)].show(1);
                    $('body').addClass('page_' + _page)

                    $('#fp-nav li a').removeClass('active')
                    $('#fp-nav li:eq(' + (_page - 1) + ') a').addClass('active')
                    _do = true;
                    setTimeout(function () {

                        if (_page == 4) {
                            $('.header-index').addClass("bright")
                            $('.switch2 ').addClass("active")
                        } else {
                            $('.header-index').removeClass("bright")
                            $('.switch2 ').removeClass("active")
                        }
                        _do = false;
                    }, 1000)
                }
            }
            //return false;
        });
        pages.page1 = new page(1);
        pages.page2 = new page(2);
        pages.page3 = new page(3);
        pages.page4 = new page(4);
        pages.page5 = new page(5);
        pages.page1.show(1, 1);

        $('#fp-nav li:eq(' + (_page - 1) + ') a').addClass('active')

        $('.tips').click(function () {
            if (_page === 5) {
                $('#fp-nav li:eq(0)').click()
            }else{

                $('#fp-nav li:eq(' + (_page ) + ')').click()
            }
        })


        !this.isMobile ? $('video')[0].play() : '';
        $('#fp-nav li').each(function () {
            $(this).click(function () {
                if (!_do) {
                    let p = $(this).index() + 1;
                    if (_page > p) {
                        pages['page' + (_page)].hide(0);
                        pages['page' + (p)].show(0);

                        $('body').removeClass('page_' + _page)
                        $('body').addClass('page_' + p)
                        _page = p;

                        $('#fp-nav li a').removeClass('active')
                        $('#fp-nav li:eq(' + (_page - 1) + ') a').addClass('active')

                        _do = true;
                        setTimeout(function () {

                            if (_page == 1) {
                                $('.logo_top,.menu_btn,.switch').removeClass("active")

                            } else if (_page == 2) {
                                $('.logo_top,.menu_btn,.switch').addClass("active")
                                $('.index2_box').addClass("active")
                            } else if (_page == 3) {
                                $('.logo_top,.menu_btn,.switch').addClass("active")
                            }
                            if (_page == 4) {
                                $('.header-index').addClass("bright")
                                $('.switch2 ').addClass("active")
                            } else {
                                $('.header-index').removeClass("bright")
                                $('.switch2 ').removeClass("active")
                            }
                            _do = false;
                        }, 1000)
                    } else {
                        // console.log(_page);
                        pages['page' + (_page)].hide(1);
                        pages['page' + (p)].show(1);
                        $('body').removeClass('page_' + _page)
                        $('body').addClass('page_' + p)
                        _page = p;

                        $('#fp-nav li a').removeClass('active')
                        $('#fp-nav li:eq(' + (_page - 1) + ') a').addClass('active')
                        _do = true;
                        setTimeout(function () {

                            if (_page == 1) {
                                $('.logo_top,.menu_btn,.switch').removeClass("active")
                            } else if (_page == 2) {
                                $('.logo_top,.menu_btn,.switch').addClass("active")
                                $('.index2_box').addClass("active")
                            } else if (_page == 3) {
                                $('.logo_top,.menu_btn,.switch').addClass("active")
                            }
                            if (_page == 4) {
                                $('.header-index').addClass("bright")
                                $('.switch2 ').addClass("active")
                            } else {
                                $('.header-index').removeClass("bright")
                                $('.switch2 ').removeClass("active")
                            }
                            _do = false;
                        }, 1000)
                    }
                }
            })
        })


    }
}
</script>
